import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { commentDefaultProps } from './defaultProps';
import type { CommentOptions } from './type';
import CommentGroup from './CommentGroup';
import CommentAvatar from './CommentAvatar';
import CommentContent from './CommentContent';
import CommentAuthor from './CommentAuthor';
import CommentMetadata from './CommentMetadata';
import CommentText from './CommentText';
import CommentActions from './CommentActions';
import CommentAction from './CommentAction';

export interface CommentProps extends CommentOptions, HTMLAttributes<HTMLDivElement> {}

interface CommentInterface extends FC<CommentProps> {
  Group: typeof CommentGroup;
  Avatar: typeof CommentAvatar;
  Content: typeof CommentContent;
  Author: typeof CommentAuthor;
  Metadata: typeof CommentMetadata;
  Text: typeof CommentText;
  Actions: typeof CommentActions;
  Action: typeof CommentAction;
}

const Comment: CommentInterface = (props) => {
  const { className, children, forwardedRef, ...commentProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('comment', className), ...commentProps },
    children,
  );
};

Comment.displayName = 'Comment';
Comment.defaultProps = commentDefaultProps;

Comment.Group = CommentGroup;
Comment.Avatar = CommentAvatar;
Comment.Content = CommentContent;
Comment.Author = CommentAuthor;
Comment.Metadata = CommentMetadata;
Comment.Text = CommentText;
Comment.Actions = CommentActions;
Comment.Action = CommentAction;

export default Comment;
